import { Route, useRoutes, useNavigate, Outlet } from 'react-router-dom'
import type { RouteObject } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import UseEffect1 from '../views/main/useEffect'
// 两种写法   1：数组集合写法   useRoutes 功能上等同于 <Routes>, 不能放在  <Routes> 里面
export function HomeRoutes() {
  let routes: RouteObject[] = [
    {
      path: '/testRoute',
      element: <TestRoute />,
      children: [
        {
          path: '/testRoute/child',
          element: <TestRouteChild />,
          // children: [{ path: '/testRoute/child/item', element: <HomeChildItem /> }],
        },
      ],
    },
    {
      path: '/useEffect1',
      element: <UseEffect1 />,
    },
  ]

  return useRoutes(routes)
}

function TestRoute() {
  return (
    <>
      <p>useRoutes数组路由写法</p>
      <p>当前路由: /TestRoute </p>
    </>
  )
}
function TestRouteChild() {
  return (
    <>
      <p>useRoutes数组路由写法</p>
      <p>当前路由: /TestRoute/child </p>
    </>
  )
}

//  2： jsx单个组件写法 <Routes>
export function HomeRoutes2() {
  return (
    <Route path="/HomeTest/child" element={<HomeChild />}>
      <Route
        index
        element={<p>默认展示的内容，不需要path定义路由，只需要加个index属性</p>}
      />
      <Route path="item" element={<HomeChildItem />} />
    </Route>
  )
}

function HomeChild() {
  let navigate = useNavigate()

  return (
    <>
      <p>当前路由: /HomeTest/child </p>
      <button
        onClick={() =>
          navigate('/HomeTest/child/item', {
            state: { name: 'HomeChildItem' },
            // replace表示会不会向history插入记录 可以通过观察浏览器前进后退  而在vue中replace不会向history插入记录，push会向history插入
            replace: true,
          })
        }
      >
        重定向1
      </button>
      {/* Outlet路由出口 接受当前路由下的二级路由内容  接受/HomeTest/child/item页面内容   只能是同一父路由下的子路由 才能展示   navigate路由重定向*/}
      <Outlet />
      <br />
      <br />
      <button onClick={() => navigate('/login', { state: { name: 'login' } })}>
        重定向login
      </button>
    </>
  )
}
function HomeChildItem() {
  // 获取重定向路由传递过来的参数
  let { state } = useLocation()
  console.log(state)

  return <p>当前路由: /HomeChild/child/item </p>
}
